class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            cate: [],
            name: '',
            pwd: '',
            confirmpwd: '',
            cid: 0,
            id: 0,
            start: 0,
            pagesize: 15,
            counts: [],
            phone:'',
            agentid:'',
            openid :'',
        };
    }

    formatlist(list) {
        var listitem = [], { cate } = this.state, rolename = '';
        list.forEach((x, i) => {
            listitem.push(
                <tr key={i}>
                    <td>{x.APPID}</td>
                    <td>{x.APPSECRET}</td>
                    <td>{x.name}</td>
                    <td>{x.phone==null?'无':x.phone}</td>
                    {/* <td>{x.nickName}</td> */}
                    <td className="operatebox">
                        <div className='operate' id={"ope" + x.id}>
                            
                            <div data-toggle="modal" data-target="#modalOne">
                                <img src="./src/edit.png" />
                                <p className='edit' onClick={this.todetail.bind(this, x.id)}>编辑</p>
                            </div>

                            <div>
                                <img src="./src/edit.png" />
                                <p onClick={this.setshow.bind(this, x.id, x.state)} className='edit'>{x.state == 'UNPUBLISHED' ? "未发布" : "已发布"}</p>
                            </div>
                            <div>
                                <img src="./src/del.png" />
                                <p className='edit colred' onClick={this.del.bind(this, x.id)}>删除</p>
                            </div>


                        </div>
                    </td>
                </tr>
            )
        });
        this.setState({ listitem, list, originallist: list })
    }
    // 发布
    setshow(e, i) {
        console.log(1111);
       setAgentstate(e, res => {
           if (res.issuccess == 1) {
               alert(`${i == "PUBLISHED" ? '取消发布' : '发布'}成功`)
               this.freshlist()
           }
       })

   }
     // 编辑
    todetail(e) {
    var { list,imgsrc } = this.state,item=[];
    list.forEach(x => {
        if (x.id == e) {
            
            this.setState({ id: e, name: x.name,APPID:x.APPID,APPSECRET:x.APPSECRET,phone:x.phone })
        }
    });
}
    // 删除
    del(e) {
        console.log(e,'eeeeee');
        
        this.setState({ delid: e }, () => {
            $('#myModal').modal('toggle');
        })
    }
    confirmdel() {
        let { delid } = this.state
        delagent( delid, res => {
            if (res.issuccess == 1) {
                alert('删除成功')
                $('#myModal').modal('toggle');
                this.freshlist()
            } else {
                $('#myModal').modal('toggle');
                alert(res.msg);
            }
        })
    }

    submit() {

        let { name, APPSECRET, APPID,phone } = this.state, that = this, err = '';
        if (name.trim() == "") err = "请输入账号昵称"
        if (APPSECRET.trim() == "") err = "请输入密码"
        if (APPID.trim() == "") err = "请再次输入密码"
        if (err.length > 0) {
            alert(err);
            return
        }
        let data = { name, APPSECRET, APPID,phone }
        if (this.state.id > 0) data['id'] = this.state.id;
        aoeagent(data, res => {
                if (res.issuccess == 1) {
                    that.setState({ id: 0, name: '', APPSECRET: '', APPID: '',phone:''  })
                    alert('保存成功');
                    that.freshlist()
                }else{
                    alert(res.msg)
                }
            })

    }


    componentDidMount() {
        // let a="oSlgu5Zma-ZXuyXKweElmZNGmn1k"
        // console.log(a.length);
        
        this.freshlist()
    }
    // getagent(){
    //     let {start}=this.state
    //     getagentlist(res => {
    //         let agenthtml = []
    //         if (res.issuccess == 1) {
    //             agenthtml.push(
    //                 <option value="0">请选择</option>
    //             )
    //             res.list.forEach((x, i) => {
    //                 agenthtml.push(
    //                 <option key={i} value={x.id}>ID：{x.id}，昵称：{x.nickName} </option>
    //                 )

    //             })
    //             this.setState({ agenthtml, originallist: res.list }, () => {
    //                 this.freshlist(start)
    //             })
    //         }
    //     })
    // }
    freshlist() {
        // let { pagesize } = this.state;
        agentlist( res => {
            if (res.issuccess == 1) {
                // if (start == 0) {
                //     let pagecount = Math.ceil(res.total / pagesize);
                //     this.setpager(pagecount, start);
                //     this.setState({ start, total: res.total })
                // }
                this.formatlist(res.list);
            }
        })

    }
    setpager(pagecount, start) {
        let counts = [];
        for (let i = 1; i < pagecount + 1; i++) {
            counts.push(start + i)
        }
        this.setState({ counts, pagestart: 0 })
    }
    clickpage(e) {
        let { start, pagesize } = this.state
        start = e * pagesize
        this.setState({ pagestart: e, start }, () => {
            this.freshlist(start)
        })
    }
    setpage(e) {
        let { pagesize, start } = this.state
        pagesize = parseInt(e)
        start = 0
        this.setState({ pagesize, start }, () => {
            this.freshlist(start)
        })
    }
    inputchange(prop, e) {
        // let { target } = this.state;
        // target[prop] = e.target.value
        // this.setState({ target })
        this.setState({ [prop]: e.target.value })
    }
    onstatechange(e) {

        let { cid } = this.state, estate = e.target.value;
            if (cid == estate) return;
            this.setState({cid: estate})
    }
    add() {
        this.setState({id:0,name: '', APPSECRET: '', APPID: '',phone:''})
    }
    render() {
        let { listitem, name, pwd, confirmpwd, counts, pagestart,APPID,APPSECRET,agentid,openid,phone } = this.state;

        return (
            <div className="breadLinebox">
                <Modal content='确定要删除吗？' click={this.confirmdel.bind(this)} />
                <div className="modal fade" id="modalOne" >
                    <div className="modal-dialog">
                        <div className="modal-content">

                            <div className="modal-header border">
                                <p className="modal-title">新建账号</p>
                                <img data-dismiss="modal" src="./src/close.png" />
                            </div>
                            <div className="modal-body">
                                <div className="input-group">
                                    <span className="input-group-addon">APPID</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'APPID')} value={ APPID } type="text" placeholder='请输入APPID' className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">APPSECRET</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'APPSECRET')} value={ APPSECRET } type="text" placeholder='请输入APPSECRET' className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">小程序名称</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'name')} value={name} type="text" placeholder='请输入小程序名称' className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">标识电话</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'phone')} value={phone} type="text" placeholder='请输入标识电话' className="input" />
                                </div>
                            </div>
                            <div className="modal-footer border">
                                <button type="button" className="closemod" data-dismiss="modal">关闭</button>
                                <button type="button" onClick={this.submit.bind(this)} data-dismiss="modal" className="submitmod">提交</button>
                            </div>

                        </div>
                    </div>
                </div>
                <div className='content_wrap panel-default content_wrap'>
                    <div className="breadLine">
                    <div className="img">
                        当前位置 > 代理管理
                    </div>
                    </div>
                    <div className="content">
                        <div className="tabletit">
                            <p className="add" data-toggle="modal" data-target="#modalOne" onClick={this.add.bind(this)}>新建</p>
                        </div>
                        <table className="tab">
                            <thead>
                                <tr>
                                    <th>APPID</th>
                                    <th>APPSECRET</th>
                                    <th>小程序名称</th>
                                    <th>标识电话</th>
                                    {/* <th>绑定人昵称</th> */}
                                    <th className="cz tconter">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {listitem}
                            </tbody>
                        </table>
                        {/* <div className="pagerbox">
                            <p>共{this.state.total}条</p>
                            <Pager counts={counts} click={this.clickpage.bind(this)} change={this.setpage.bind(this)} index={pagestart} />
                        </div> */}
                    </div>
                </div>
            </div>


        )


    }
}





ReactDOM.render(
    <div>
        <TopLine />
        <div id='body'>
            <LeftMenu code='agent' />
            <Main />
        </div>
    </div>
    // <Barrage/>
    , $('.container')[0]
)